<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>测试页面</title>
    <style>
        body { 
            font-family: Arial, sans-serif; 
            margin: 20px;
            background: #f0f0f0;
        }
        .test-box {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        .success { color: #28a745; }
        .error { color: #dc3545; }
        .info { color: #17a2b8; }
    </style>
</head>
<body>
    <div class="test-box">
        <h1>清水寺网站本地测试</h1>
        <p class="info">如果您能看到这个页面，说明本地服务器正在正常工作。</p>
    </div>
    
    <div class="test-box">
        <h2>测试结果</h2>
        <p class="success">✅ 本地服务器运行正常</p>
        <p class="success">✅ HTML文件可以正常访问</p>
        <p class="success">✅ CSS样式可以正常加载</p>
    </div>
    
    <div class="test-box">
        <h2>访问主页</h2>
        <p>点击下面的链接访问清水寺主页：</p>
        <a href="index.html" style="display: inline-block; background: #007bff; color: white; padding: 10px 20px; text-decoration: none; border-radius: 5px;">访问清水寺主页</a>
    </div>
    
    <div class="test-box">
        <h2>注意事项</h2>
        <ul>
            <li>如果主页显示为黑色，请刷新页面</li>
            <li>某些图片可能需要网络连接才能显示</li>
            <li>JavaScript功能可能受限</li>
        </ul>
    </div>
</body>
</html>
